/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    Platform
} from 'react-native';

var DCMineCell = React.createClass({
    getDefaultProps(){
        return{
            leftIconName: '',
            leftTitle: '',
            rightIconName: '',
            rightTitle: '',
        }
    },

    render() {
        return (
            <TouchableOpacity activeOpacity={0.5}>
                <View style={styles.container}>
                    {/*左边*/}
                    <View style={styles.leftViewStyle}>
                        <Image source={{uri:this.props.leftIconName}} style={styles.leftImageStyle}></Image>
                        <Text style={styles.leftTitleStyle}>{this.props.leftTitle}</Text>
                    </View>
                    {/*右边*/}
                    <View style={styles.rightViewStyle}>
                        {this.rightSubView()}
                    </View>
                </View>
            </TouchableOpacity>
        );
    },

    //右边的内容
    rightSubView(){
        return(
            <View style={{flexDirection: 'row', alignItems:'center'}}>
                {this.renderRightContent()}
                {/*小箭头*/}
                <Image source={{uri: 'icon_cell_rightArrow'}} style={{width:8, height:13, marginRight:8, marginLeft:5}} />
            </View>
        )
    },

    renderRightContent(){
        if (this.props.rightIconName.length == 0){  //不返回图片
            return(
                <Text style={{color:'gray'}}>{this.props.rightTitle}</Text>
            )
        } else{
            return(
                <Image source={{uri: this.props.rightIconName}} style={{width: 24, height: 13}} />
            )
        }
    }
});

const styles = StyleSheet.create({
    container: {
        //主轴方向
        flexDirection: 'row',
        //主轴对齐方式
        justifyContent: 'space-between',
        backgroundColor: 'white',
        alignItems: 'center',
        height: Platform.OS == 'ios' ? 44 : 36,

        borderBottomColor: '#e8e8e8',
        borderBottomWidth: 0.5
    },
    leftViewStyle: {
        //主轴方向
        flexDirection:'row',
        //侧轴方向
        alignItems:'center',
        marginLeft: 8,
    },
    leftImageStyle: {
        width: 24,
        height: 24,
        marginRight:6,
        borderRadius: 12,
    },
    leftTitleStyle: {
        fontSize: 16,

    },
    rightViewStyle: {

    }
});

//输出组件类
module.exports = DCMineCell;